
var CPUXYS = [
{X: 0 , Y: -28},
{X: 12 , Y: -28},
{X: 25, Y: -24},
{X: 28 , Y: -14},
{X: 28 , Y: -3},
{X: 28 , Y: 6},
{X: 28 , Y: 17},
{X: 24 , Y: 26},
{X: 12 , Y: 28},
{X: 2 , Y: 28},
{X: -12 , Y: 28},
{X: -22 , Y: 26},
{X: -28 , Y: 16},
{X: -28 , Y: 2},
{X: -28 , Y: -8},
{X: -28 , Y: -18},
{X: -22 , Y: -24}
];
var canvas = null;//全局变量 画布这个dom 绑定事件用
var context = null;//全局变量 画布这个对象 画东西用
// 	保存画布上所有的对象
var circles = [];
// 	画布原有的对象
var oldCircles = [];
//	画布上的线的对象
var lineObjs = [];
//	画布上所有的图片
var imgs = [];
//鼠标点击 如果选中一个元素 这个就是选中的那个元素
var previousSelectedCircle;
//选中的元素的初始位置
var chooseObjInitPlace = {};
// 这时需要判断有没有连线连在这个元素上
var dragLines1 = [];
// 这时需要判断有没有连线连在这个元素上
var dragLines2 = [];
//是否在拖拽
var isDragging = false;
//鼠标放开了 判断一下落点是否有元素 如果有元素 拖动的元素归位 并且连线
var lineObj = null;
// 画线的时候 鼠标点击 如果选中一个元素 这个就是选中的那个元素 画线的开始的元素
var previousSelectedCircleStartLine;
// 画线的时候 鼠标点击 如果选中一个元素 这个就是选中的那个元素 画线的结束的元素
var previousSelectedCircleEndLine;
// 画布上所有的一级
var canvasAllLevel1 = [];
// 画布上所有的二级
var canvasAllLevel2 = [];
// 画布上所有的三级
var canvasAllLevel3 = [];
// 画布上所有的四级
var canvasAllLevel4 = [];
//画布类型 如果是1 代表一级为主机 二级为板卡 如果是2 代表一级为板卡 二级为处理单元
var canvasType = 1;
//拖拽的那个元素是否是初始化中的元素
var canvasIsInitDom = true;
//拖拽的元素的级别
var canvasTuoLevel = 0;
//高亮的蓝色框
var canvasAllLevelObj = [];
//滚动条高度
var table_box_scroll_top = 0;
//右键选中线对象
var rightClickLine;
var preLineObjs=[];
/**
 *	初始化画布
 *	参数: 宽 高
 *	x , y
 *	data.width , data.height
 *	data.x , data.y
 *	type : 画布类型
 *	fun1 : 连线时候的回调
 *	fun2 : 断开连线时候的回调
 * 	fun3 : 双击连线的时候回调
 *	fun4 : 双击图标的时候回调
 *	fun5 : 单击线回调 xm
 *	fun6 : 点到cpu回调
 **/
var canvasInitData = {};
var isDashLine=false;
function init_canvas(data ,type , fun1 , fun2,fun3,fun4,fun5,fun6,fun7){
    canvasType = type;
    $(".table-box").append('<canvas style="position: absolute; top: ' + data.y + 'px;left : ' + data.x + 'px;" id="myCanvas" height="'+data.height+'"  width="'+data.width+'"></canvas>');
    canvas = document.getElementById('myCanvas');
    context = canvas.getContext("2d");
    var funObj = {fun1:fun1,fun2:fun2,fun3:fun3,fun4:fun4,fun5:fun5,fun6:fun6,fun7:fun7};
    $(canvas).bind('mousedown',funObj, canvasClick);
    $(canvas).bind('mousedown',funObj, canvasLevel3Click);
    $(canvas).bind('click', canvasMouseClick);
    //$(canvas).bind('mouseup' , funObj , outMouseDragging);
    //$(canvas).bind('mouseout' , funObj , outMouseDragging);
    $(canvas).bind('mousemove' , dragCircle);
    $(canvas).bind('dblclick' , funObj , canvasDbClick);
    $(canvas).bind('dblclick' , funObj , appDbClick);
    $(canvas).bind('click' , funObj , canvasClick1);
    canvasInitData.data = data;
    canvasInitData.fun1 = fun1;
    canvasInitData.fun2 = fun2;
    drawCircles();
}

/**
 *	对画板上的对象重新操作后 进行重绘的方法
 */
function drawCircles() {
    // 清除画布，准备绘制

    context.clearRect(0, 0, canvas.width, canvas.height);
    context.setLineDash([1,0]);
    // 遍历所有对象
    for(var i=0; i<circles.length; i++) {
        var circle = circles[i];
        // 绘制对象
        context.beginPath();
        if(circle.img != null){
            drawOneImage(circle.img , circle.x, circle.y,circle.width , circle.height);
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "black";
        }else if(circle.text != null){
            drawOneFont(circle);
        }else{
            context.setLineDash([1,0]);
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "black";
            context.rect(circle.x,circle.y ,circle.width , circle.height);
        }
        context.fill();
        context.stroke();
    }

    // 遍历所有一级 还有title和count
    for(var i=0; i<canvasAllLevel1.length; i++) {
        var circle = canvasAllLevel1[i];

        // 绘制对象
        context.beginPath();
        context.fillStyle = "#F7F8FA";
        context.strokeStyle = "#3E4C5A";
        context.shadowColor = "#EEEFF1";
        context.lineWidth = 0;
        context.shadowBlur =10;
        drawOneImage(circle.img , circle.x, circle.y+40,circle.width , circle.height);
        if(circle.text != null){
            drawOneFont(circle);
        }
        context.fill();
        context.fillRect(circle.x,circle.y ,circle.width , circle.height);
        // context.lineWidth = 0.5;
        if(circle.title!=null) {
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "black";
            drawOneRect(circle);
        }
        drawOneImage('../images/main.png', circle.x+25, circle.y+20,10 , 10, null);
        context.stroke();
        
        context.beginPath();
        context.fillStyle = "#eeeeee";
        context.strokeStyle ='#FFFFFF';  //设置线的颜色状态
        context.shadowBlur =0;
        doLine3(circle.x+20,circle.y+50,circle.x+circle.width-20,circle.y+50);
        context.stroke();
    }

    // 遍历所有二级
    for(var i=0; i<canvasAllLevel2.length; i++) {
        var circle = canvasAllLevel2[i];
        // 绘制对象
        context.beginPath();
        context.lineWidth = 0;
        context.fillStyle = "#F9FAFC";
        context.strokeStyle = "#FFFFFF";
        context.shadowColor = "#EEEFF1";
        context.shadowBlur =10;
        context.setLineDash([1,0]);
        context.fillRect(circle.x,circle.y ,circle.width , circle.height);
        drawOneImage(circle.img , circle.x, circle.y,circle.width-20 , circle.height-20);

        context.fill();
        if(circle.text != null){
            drawOneFont(circle);
            //绘制
        }
        context.rect(circle.x,circle.y ,circle.width , circle.height);

        if(circle.title2!=null) {
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "black";
            drawOneRect2(circle);
        }
        drawOneImage('../images/board.png', circle.x+15, circle.y+15,10 , 10, null);
        context.stroke();
        context.beginPath();
        context.fillStyle = "#eeeeee";
        context.strokeStyle ='#FFFFFF';  //设置线的颜色状态
        context.shadowBlur =0;
        doLine3(circle.x+15,circle.y+40,circle.x+circle.width-15,circle.y+40);
        context.stroke();
    }

    // 遍历所有三级

    for(var i=0; i<canvasAllLevel3.length; i++) {
        var circle = canvasAllLevel3[i];
        // 绘制对象
        context.beginPath();
        if(circle.img != null){
            drawOneImage(circle.img , circle.x, circle.y,circle.width , circle.height);
        }else if(circle.text != null){
            drawOneFont(circle);
            //绘制
        }else{
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "rgba(0, 0, 0, 0)";
            context.rect(circle.x,circle.y ,circle.width , circle.height);
        }
        if(circle.color != null){
        	 context.fillStyle = "rgba(0, 0, 0, 0)";
             context.strokeStyle = circle.color;
             context.rect(circle.x,circle.y ,circle.width , circle.height);
        }
        if(circle.params.cpu.cpuName!=null) {
            // context.fillStyle = "#eeeeee";
            // context.strokeStyle = "black";
             drawOneRect3(circle);
         }
        /*context.lineWidth = 0;
        context.fillStyle = "#eeeeee";
       // context.strokeStyle ='#FFFFFF';  //设置线的颜色状态
        context.setLineDash([1,0]);
        context.fill();
        context.stroke();*/
    }
    // 遍历所有四级
    for(var i=0; i<canvasAllLevel4.length; i++) {
        var circle = canvasAllLevel4[i];
        // 绘制对象

        context.beginPath();
        if(circle.img != null){
            drawOneImage(circle.img , circle.x, circle.y,circle.width , circle.height);
        }else if(circle.text != null){
            drawOneFont(circle);
            //绘制
        }else{
            context.setLineDash([1,0]);
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "#FFFFFF";
            context.rect(circle.x,circle.y ,circle.width , circle.height);
        }
        if(circle.app.name!=null) {
            drawOneRect4(circle);
        }
       /* context.fillStyle = "#eeeeee";
        context.strokeStyle = "black";
        context.fill();
        context.stroke();*/
    }
    // 遍历所有框
    for(var i=0; i<canvasAllLevelObj.length; i++) {
        var circle = canvasAllLevelObj[i];
        // 绘制对象
        context.beginPath();
        context.lineWidth = 1;
        context.setLineDash([1,0]);
        if(circle.color){
            context.strokeStyle = circle.color;
        }else{
            context.strokeStyle = '#bbbbbb';
        }
        context.strokeRect(circle.x,circle.y ,circle.width , circle.height);
        context.stroke();
    }
    //遍历所有线的对象
    for(var i=0; i<lineObjs.length; i++) {
        var lineObj = lineObjs[i];
        // 绘制线
        DrawLine(lineObj.obj1 , lineObj.obj2, lineObj.color , context);
    }
    //十字画线的时候 执行画线
    if(drawLineObj != null && drawLineObj.startx!=null){
        DrawLine2(drawLineObj , context);
    }
}

/**
 *右键菜单
 */
function canvasLevel3Click(e){
    var type=e.which;
    if(type!=3){
        return false;
    }else{
        // 取得画布上被单击的点
    	var curX=$(".table-box").scrollLeft();
    	var curY=$(".table-box").scrollTop();
        var clickX = e.pageX - canvas.offsetLeft-320;
        var clickY = e.pageY - canvas.offsetTop-70;
        // 查找被单击的對象
        for(var i = 0 ; i < canvasAllLevel3.length; i++) {
            var circle = canvasAllLevel3[i];
            if(clickX >= circle.x-curX && clickX <= circle.x + circle.width-curX && clickY >= circle.y-curY && clickY <= circle.y + circle.height-curY){
                //选中了这个元素
            	$(".lineMenu").hide();
                $(".rightKey").css({left:(345+clickX)+"px",top:(50+clickY)+"px"});
                $(".rightKey").show();
                e.stopPropagation();
                return  false;
                if(e.data.fun5) {
                    //说明点到图了
                    e.data.fun5(circle);
                }
                break;
            }
        }
        
     // 取得画布上被单击的点
      //遍历所有线的对象 查询 x y 坐标在双击时 鼠标的位置
        for(var i = 0 ; i < lineObjs.length ; i++){
            var obj1 = lineObjs[i].obj1;
            var obj2 = lineObjs[i].obj2;
            var x1 = obj1.x;
            var x2 = obj2.x;
            var y1 = obj1.y;
            var y2 = obj2.y;
            var bigY = y2>y1?y2:y1;
        	var smallY = y2<y1?y2:y1;
        	var bigX = x2>x1?x2:x1;
        	var smallX = x2<x1?x2:x1;
        	if(clickX<bigX+5&&clickX>smallX-5&&clickY<bigY+5&&clickY>smallY-5){
        		if(x2==x1||y2==y1){
        			//点到线了
        			$(".lineMenu").css({left:(345+clickX)+"px",top:(50+clickY)+"px"});
        			$(".rightKey").hide();
        			rightClickLine = lineObjs[i];
        			$(".lineMenu").show();
                }else{
                	var k = (y2-y1)/(x2-x1);
                	var b = y2-k*x2;
                	var curY = clickX * k + b;
                	if(clickY>curY-5&&clickY<curY+5){
                		//点到线了
                		rightClickLine = lineObjs[i];
                		$(".lineMenu").css({left:(345+clickX)+"px",top:(50+clickY)+"px"});
                		$(".rightKey").hide();
                		$(".lineMenu").show();
                	}
                }
        	}
        }
        
        
        
    }
}

/**
 *画布双击,查询是否点击的app
 */
function appDbClick(e){
    // 取得画布上被单击的点
	var curX=$(".table-box").scrollLeft();
	var curY=$(".table-box").scrollTop();
    var clickX = e.pageX - canvas.offsetLeft-320;
    var clickY = e.pageY - canvas.offsetTop-70;
    // 查找被单击的對象
    for(var i = 0 ; i < canvasAllLevel3.length; i++) {
        var circle = canvasAllLevel3[i];
        if(clickX >= circle.x-curX && clickX <= circle.x + circle.width-curX && clickY >= circle.y-curY && clickY <= circle.y + circle.height-curY){
            //选中了这个元素
            if(e.data.fun4) {
                //说明点到图了
                e.data.fun4(circle);
            }
            break;

        }

    }
}

/**
 * 	画布双击 查询是否有点击的连线
 */
function canvasDbClick(e){
 
}
/**
 * 	画布单击 查询是否有点击的连线
 */
function canvasClick1(e){
	// 取得画布上被单击的点
	var curX=$(".table-box").scrollLeft();
	var curY=$(".table-box").scrollTop();
	var clickX = e.pageX - canvas.offsetLeft-320;
	var clickY = e.pageY - canvas.offsetTop-70;
	//遍历所有线的对象 查询 x y 坐标在双击时 鼠标的位置
	 for(var i = 0 ; i < lineObjs.length ; i++){
	        var obj1 = lineObjs[i].obj1;
	        var obj2 = lineObjs[i].obj2;
	        var x1 = obj1.x;
	        var x2 = obj2.x;
	        var y1 = obj1.y;
	        var y2 = obj2.y;
	        var bigY = y2>y1?y2:y1;
	    	var smallY = y2<y1?y2:y1;
	    	var bigX = x2>x1?x2:x1;
	    	var smallX = x2<x1?x2:x1;
	    	if(clickX<bigX+5&&clickX>smallX-5&&clickY<bigY+5&&clickY>smallY-10){
	    		if(x2==x1||y2==y1){
	    			//点到线了
	    			  if (e.data.fun5) {
							//说明点到线了
							var linkObj;
							for(var j=0;j<lineObjs.length;j++){
								if(lineObjs[i].obj1.id==obj1.id){
									if(lineObjs[i].obj2.id==obj2.id){
										linkObj = lineObjs[i];
									}
								}else if(lineObjs[i].obj1.id==obj2.id){
									if(lineObjs[i].obj2.id==obj1.id){
										linkObj = lineObjs[i];
									}
								}
							}
							e.data.fun5(linkObj);
							break;
					}
	            }else{
	            	var k = (y2-y1)/(x2-x1);
	            	var b = y2-k*x2;
	            	var curY = clickX * k + b;
	            	if(clickY>=curY-5&&clickY<=curY+5){
	            		//点到线了
	            		 if (e.data.fun5) {
							//说明点到线了
							var linkObj;
							for(var j=0;j<lineObjs.length;j++){
								if(lineObjs[i].obj1.id==obj1.id){
									if(lineObjs[i].obj2.id==obj2.id){
										linkObj = lineObjs[i];
									}
								}else if(lineObjs[i].obj1.id==obj2.id){
									if(lineObjs[i].obj2.id==obj1.id){
										linkObj = lineObjs[i];
									}
								}
							}
							e.data.fun5(linkObj);
							break;
						}
	            	}
	            }
	    	}
	    }
	 
	 //查看是否选中了两个单元
	 if(canvasAllLevelObj.length==2){
		 
		 var curobj1=canvasAllLevelObj[0];
		 var curobj2=canvasAllLevelObj[1];
		 for(var j=0;j<canvasAllLevel3.length;j++){
			 	var selectobj1;
			 	var selectobj2;
			 if(curobj1.index==canvasAllLevel3[j].params.cpu.rioNetId){
			  selectobj1=canvasAllLevel3[j];
			 }
			 if(curobj2.index==canvasAllLevel3[j].params.cpu.rioNetId){
				  selectobj2=canvasAllLevel3[j];
			 }
			 if(selectobj1!=null&&selectobj2!=null){
				e.data.fun7(selectobj1,selectobj2);
				 break;
			 }
		 }
		
	 }

}
/**画主机板卡横线*/
function doLine3(str1,str2,end1,end2){
    context.beginPath();
	context.moveTo (str1,str2);       //设置起点状态
	context.lineTo (end1,end2);       //设置末端状态
	context.lineWidth = 1;          //设置线宽状态
	context.strokeStyle ='#E8E9EB';  //设置线的颜色状态
	context.stroke(); 
}

/**
 *	画一个一级元素   需要带title count
 */
function drawOneRect(circle){

    context.rect(circle.x,circle.y ,circle.width , circle.height);

    context.lineWidth = 2;
    context.font = "14px Microsoft YaHei";
    context.fillStyle = "black";
    context.strokeStyle = "#FFFFFF";
    context.fillText(circle.title, circle.x+40, circle.y+30)

    var text = '';
    if(canvasType == 1 || canvasType == 3){
        text = circle.count +'个板卡';
    }else if(canvasType == 2){
        text = circle.count +'个单元';
    }
    context.fillStyle = "#999999";
    context.fillText(text, circle.x -20+ circle.width - 50, circle.y+30)

}
/**
 *	画一个二级元素   需要带title count
 */
function drawOneRect2(circle){

    context.rect(circle.x,circle.y ,circle.width , circle.height);
    var curTile=circle.title2;
    if(curTile.length>5){
    	curTile=curTile.substring(0,5)+'…';
    }
    context.lineWidth = 2;
    context.font = "12px Microsoft YaHei";
    context.fillStyle = "black";
    context.strokeStyle = "#FFFFFF";
    context.fillText(curTile, circle.x+30, circle.y+25)

    var text = '';
    if(canvasType == 2 || canvasType == 3){
        text = circle.count +'个单元';
    }else if(canvasType == 3){
        text = circle.count +'个单元';
    }
    context.fillStyle = "#999999";
    context.fillText(text, circle.x -20+ circle.width - 40, circle.y+25)
    //context.fillText(circle.title3, circle.width - 25, circle.y+25)
}
/**
 *	画一个三级元素   需要带title count
 */
function drawOneRect3(circle){

    context.rect(circle.x,circle.y ,circle.width , circle.height);

    context.lineWidth = 2;
    context.font = "12px Microsoft YaHei";
    context.fillStyle = "black";
   // context.strokeStyle = "black";
    context.fillText(circle.params.cpu.cpuName, circle.x+10, circle.y+circle.height+10)
}
/**
 *	画一个四级元素   需要带title count
 */
function drawOneRect4(circle){

    context.rect(circle.x,circle.y ,circle.width , circle.height);

    context.lineWidth = 2;
    context.font = "12px Microsoft YaHei";
    context.fillStyle = "black";
   // context.strokeStyle = "#FFFFFF";
    context.fillText(circle.app.name, circle.x+10, circle.y+circle.height+20)
}
/**
 *	写文字
 */
function drawOneFont(circle){
    //设置样式
    context.lineWidth = 2;
    context.font = "14px Microsoft YaHei";
    context.fillStyle = "black";
    context.strokeStyle = "#F5270B";
    context.fillText(circle.text, circle.x, circle.y)
}

/**
 *	画一张图片 这张图片如果是未加载的 等待加载后 加入到内存中
 */
function drawOneImage(imgSrc , x , y ,width, height,fun){
	if(imgSrc != null){
		if(imgs[imgSrc]==null){
			var img = new Image()
			img.src = imgSrc;
			img.onload = function(){
				imgs[imgSrc] = img;
				context.drawImage(img, x, y,width,height);
				//遍历所有线的对象
				for(var i=0; i<lineObjs.length; i++) {
					var lineObj = lineObjs[i];
					// 绘制线
					DrawLine(lineObj.obj1 , lineObj.obj2, lineObj.color , context);
				}
			}
		} else {
			context.drawImage(imgs[imgSrc], x, y,width,height);
		}
		if(fun){
			fun();
		}
	}
}
/**
 *	是鼠标单击
 */
function canvasMouseClick(e){
	var curX=$(".table-box").scrollLeft();
	var curY=$(".table-box").scrollTop();
    var clickX = e.pageX - canvas.offsetLeft-320;
    var clickY = e.pageY - canvas.offsetTop-70;
    var isCancelChoose = false;
    var isChooseOne = false;
    if(mouseInitX >= clickX-5 && mouseInitX <= clickX+5 && mouseInitY >= clickY-5&& mouseInitY <= clickY+5){
        for(var i = 0 ; i < canvasAllLevelObj.length; i++) {
            var circle = canvasAllLevelObj[i];
            if (clickX >= circle.x - curX && clickX <= circle.x + circle.width - curX && clickY >= circle.y - curY&& clickY <= circle.y + circle.height- curY) {
                cancelChoose();
                canvasAllLevelObj = [];
                isCancelChoose = true;
                break;
            }
        }
      /*  //判断选中的是几级
        var isChooseOne = false;*/
        for(var i = 0 ; i < canvasAllLevel3.length; i++) {
            var circle = canvasAllLevel3[i];
            if (clickX >= circle.x-curX && clickX <= circle.x + circle.width-curX && clickY >= circle.y -curY&& clickY <= circle.y + circle.height-curY) {
                //选中了这个元素
                levelType=2;
                if(!isCancelChoose){
                    addCanvasAllLevelObj(circle.id, 3);
                }
                drawCircles();
                isChooseOne = true;
                break;
            }
        }
      
    }

}



/**
 *	点击画布 查找有无选中的对象
 *
 */

var mouseInitX = 0;
var mouseInitY = 0;
function canvasClick(e) {
    // 取得画布上被单击的点
	var curX=$(".table-box").scrollLeft();
	var curY=$(".table-box").scrollTop();
    var clickX = e.pageX - canvas.offsetLeft-320;
    var clickY = e.pageY - canvas.offsetTop-70;
    mouseInitX = clickX;
    mouseInitY = clickY;
    //查找是否点击到了cpu
    for(var i=0;i<canvasAllLevel3.length;i++){
        var circle = canvasAllLevel3[i];
        if(clickX >= circle.x - curX&& clickX <= circle.x + circle.width - curX && clickY >= circle.y - curY && clickY <= circle.y + circle.height - curY){
            if(e.data.fun6){
                e.data.fun6(circle);
            }
            break;
        }
    }
    //查找是否点击到了框
    for(var i=0;i<canvasAllLevelObj.length;i++){
        var circle = canvasAllLevelObj[i];
        if(clickX >= circle.x -curX  && clickX <= circle.x + circle.width - curX && clickY >= circle.y -curY && clickY <= circle.y + circle.height - curY){
        	cancelChoose();
        	drawCircles();
            break;
        }
    }
    // 查找被单击的對象
    var isChooseOneObj = false;
    for(var i = 0 ; i < circles.length; i++) {
        var circle = circles[i];
        initDomPlace(circles , i);
        if(clickX >= circle.x-curX && clickX <= circle.x + circle.width -curX&& clickY >= circle.y -curY&& clickY <= circle.y + circle.height-curY){
            //选中了这个元素
            isChooseOneObj = true;
            if(circle.text !=null){
                isChooseOneObj = false;
            }
        }

        // 判断这个点是否在对象中
        if(isChooseOneObj){
            // 清除之前选择的对象
            previousSelectedCircle = circle;
            canvasTuoLevel = previousSelectedCircle.level;
            dragLines1 = [];
            dragLines2 = [];
            for(var i = 0 ; i < lineObjs.length ; i++){
                var lineObj = lineObjs[i];
                // 将对象移动到鼠标位置
                if(lineObj.obj1.x == previousSelectedCircle.x + previousSelectedCircle.width/2 && lineObj.obj1.y == previousSelectedCircle.y + previousSelectedCircle.height/2){
                    dragLines1.push(lineObj);
                }else if(lineObj.obj2.x == previousSelectedCircle.x + previousSelectedCircle.width/2 && lineObj.obj2.y == previousSelectedCircle.y + previousSelectedCircle.height/2){
                    dragLines2.push(lineObj);
                }
            }
            // 使对象允许拖拽
            isDragging = true;
            //更新显示
            drawCircles();
            chooseObjInitPlace.x = circle.x;
            chooseObjInitPlace.y = circle.y;
            //停止搜索
            return;
        }else{
            previousSelectedCircle = null;
            canvasTuoLevel = 0;
            chooseObjInitPlace = {};
        }
    }
}
/**
 *	点击画布的时候 记录一下原有元素的位置 用于连线
 *	是否需要记录点击元素的原有位置 暂未使用
 */
function initDomPlace(circles , index){
    oldCircles = new Array();
    for(var i = 0 ; i < circles.length ; i++){
        if(i == index){
            continue;
        }
        var circleObj = {};
        circleObj.x = circles[i].x;
        circleObj.y = circles[i].y;
        circleObj.img = circles[i].img;
        circleObj.width = circles[i].width;
        circleObj.height = circles[i].height;
        circleObj.id = circles[i].id;
        oldCircles.push(circleObj);
    }
}
/**
 *	停止拖拽的时候触发的事件
 *	查看拖拽的元素 放开的时候 是否在某个一级中 如果在的话 触发事件 新增一个二级元素 并且在固定位置
 */
function outMouseDragging(e){
    isDragging = false;
    var curX=$(".table-box").scrollLeft();
	var curY=$(".table-box").scrollTop();
    var clickX = e.pageX - canvas.offsetLeft-320;
    var clickY = e.pageY - canvas.offsetTop-70;
    drawCircles();
    var isChooseOneObj = false;
    if(previousSelectedCircle == null){
        return;
    }
    for(var i = 0 ; i < canvasAllLevel3.length; i++) {
        var circle = canvasAllLevel3[i];
        if(clickX >= circle.x -curX&& clickX <= circle.x + circle.width -curX&& clickY >= circle.y -curY&& clickY <= circle.y + circle.height-curY){
            //选中了这个元素
            isChooseOneObj = true;
        }
        // 判断这个点是否在对象中
        if(isChooseOneObj){
            //新增一个四级元素 要根据type还有这个一级下有几个二级 计算位置
            var isHaveObj = false;
            for(var jj = 0 ; jj < canvasAllLevel4.length ; jj++){
                var obj = canvasAllLevel4[jj];
                if(obj.pId == circle.id){
                    //这个三级下有四级元素了
                    isHaveObj = true;
                    break;
                }
            }
            if(isHaveObj){
                alert('有元素了!')
            }else{
                addCanvasLevel4(previousSelectedCircle , clickX);
            }

            //更新显示
            drawCircles();
            //停止搜索
            return;
        }else{
            lineObj = null;
        }
    }
}

/**
 *	新增一个一级元素
 */
function addCanvasLevel1(index , funs){
    var title = '';
    var canvasAllLevel1Obj = {};
    canvasAllLevel1Obj.count = 0;
    canvasAllLevel1Obj.id = funs.id;
    canvasAllLevel1Obj.machineBox = funs;
    canvasAllLevel1Obj.level =1;
    canvasAllLevel1Obj.index = canvasAllLevel1.length;

    canvasAllLevel1Obj.y = 40;
    if(canvasType == 1 || canvasType == 3){
        title = '主机'+index;
        canvasAllLevel1Obj.title = title;
        canvasAllLevel1Obj.width = 260;
        canvasAllLevel1Obj.height = 380;
        //主机-板卡 最多两个
        if(canvasAllLevel1.length >= 2){
            //最多有两个 不能继续增加了
            alert('有两个主机了!!')
            drawCircles();
            return ;
        }else if(canvasAllLevel1.length == 0){
            //可以增加 如果没有过主机 给他放第一个位置
            canvasAllLevel1Obj.x = 50;
        }else if(canvasAllLevel1.length == 1){
            //如果有一个主机 算一下第一个主机的宽度 给他放到第二个位置
            canvasAllLevel1Obj.x = (canvasAllLevel1[0].x + canvasAllLevel1[0].width + 80);
        }
    }
    var height = canvas.height;
	if(canvasAllLevel1Obj.y +canvasAllLevel1Obj.height +40> height){
		canvas.height = canvasAllLevel1Obj.y + canvasAllLevel1Obj.height+60;
	}
	 var width = canvas.width;
	if(canvasAllLevel1Obj.x +canvasAllLevel1Obj.width +40> width){
		canvas.width = canvasAllLevel1Obj.x + canvasAllLevel1Obj.width+60;
	}
    canvasAllLevel1.push(canvasAllLevel1Obj);
    drawCircles();
}
/**
 *	新增一个二级元素
 */
function addCanvasLevel2(pindex , index,funs){
    var canvasAllLevel2Obj = {};
    canvasAllLevel2Obj.count = 0;
    canvasAllLevel2Obj.id = funs.boardId;
    canvasAllLevel2Obj.pIndex = pindex;
    canvasAllLevel2Obj.index = index;
    canvasAllLevel2Obj.board = funs;
    canvasAllLevel2Obj.level =2;

    for(var i = 0 ; i < canvasAllLevel1.length ; i++){
        var obj = canvasAllLevel1[i];
        if(obj.index == pindex){
            pindex = i;
        }
    }
    //计算各种位置
    //查看本一级下有几个二级
    if(canvasType == 1 || canvasType == 3){

        canvasAllLevel2Obj.width = 200;
        canvasAllLevel2Obj.height =250;
        var myCount = index;
        var curNo=myCount+1;
        title2 = '板卡'+curNo;
        if(funs.boardName){
        	title2=funs.boardName;
        }
        canvasAllLevel2Obj.title2 = title2;
        canvasAllLevel1[pindex].count = myCount+1;
        if(myCount > 3){
            //宽度固定了  判断是否需要改变主机的高度
            if(myCount % 4 == 0){
                //另起一排 增加本主机的高度
                canvasAllLevel1[pindex].height = canvasAllLevel1[pindex].height + 280;
                canvasAllLevel2Obj.y = canvasAllLevel1[pindex].y + 80 + 280*((myCount -( myCount%4)) / 4);
                canvasAllLevel2Obj.x = canvasAllLevel1[pindex].x + 30;
            }else{
                canvasAllLevel2Obj.y = canvasAllLevel1[pindex].y + 80 + 280*((myCount -( myCount%4)) / 4);
                canvasAllLevel2Obj.x = canvasAllLevel1[pindex].x + 30 + 240*(myCount%4);
            }
        }else{
            canvasAllLevel2Obj.y = 130;
            //不足四个 第一排增加元素 主机宽度增加 如果是一个元素并且有第二个主机 第二个主机往右移动
            if(myCount != 0){
                canvasAllLevel1[pindex].width = canvasAllLevel1[pindex].width + 240;
                canvasAllLevel2Obj.x = canvasAllLevel1[pindex].x + 30 + 240*myCount;
            }else{
                canvasAllLevel2Obj.x = canvasAllLevel1[pindex].x + 30;
            }
            if(index == 0 && canvasAllLevel1.length == 2){
                //是一个元素并且有第二个主机 第二个主机往右移动
                canvasAllLevel1[1].x = (canvasAllLevel1[0].x + canvasAllLevel1[0].width + 80);
            }
        }
    }
    if(index<4){
		if(index-1>=0 && canvasAllLevel2[canvasAllLevel2.length-1].height>250){
			canvasAllLevel2Obj.height=canvasAllLevel2[canvasAllLevel2.length-1].height;
		}
	}
	if(index>=4){
		if(index%4==0){
			canvasAllLevel2Obj.y=canvasAllLevel2[canvasAllLevel2.length-4].y+canvasAllLevel2[canvasAllLevel2.length-4].height+30;
		}else if(index%4==1){
			canvasAllLevel2Obj.y=canvasAllLevel2[canvasAllLevel2.length-1].y;
			canvasAllLevel2Obj.height=canvasAllLevel2[canvasAllLevel2.length-1].height;
		}else if(index%4==2){
			canvasAllLevel2Obj.y=canvasAllLevel2[canvasAllLevel2.length-1].y;
			canvasAllLevel2Obj.height=canvasAllLevel2[canvasAllLevel2.length-1].height;
		}else if(index%4==3){
			canvasAllLevel2Obj.y=canvasAllLevel2[canvasAllLevel2.length-1].y;
			canvasAllLevel2Obj.height=canvasAllLevel2[canvasAllLevel2.length-1].height;
		}
	}
    canvasAllLevel2Obj.x_=canvasAllLevel2Obj.x-canvasAllLevel1[pindex].x;
    canvasAllLevel2Obj.y_=canvasAllLevel2Obj.y-canvasAllLevel1[pindex].y;
    canvasAllLevel2.push(canvasAllLevel2Obj);
    var height = canvas.height;
	if(canvasAllLevel1[pindex].y +canvasAllLevel1[pindex].height+40> height){
		canvas.height = canvasAllLevel1[pindex].y + canvasAllLevel1[pindex].height+50;
	}
	var width = canvas.width;
	if(canvasAllLevel1[pindex].x +canvasAllLevel1[pindex].width+40> width){
		canvas.width = canvasAllLevel1[pindex].x + canvasAllLevel1[pindex].width+50;
	}
    //回调函数
    drawCircles();
}

/**
 *	新增一个三级元素
 *1.二级元素的数据中的索引  2.所属的一级元素的index  3.回调函数
 */
function addCanvasLevel3(ppIndex ,pIndex,Index,img, funs){
    var canvasAllLevel3Obj = {};

    canvasAllLevel3Obj.ppIndex = ppIndex;
    canvasAllLevel3Obj.id = funs.cpu.rioNetId;
    canvasAllLevel3Obj.width = 60;
    canvasAllLevel3Obj.height = 60;
    canvasAllLevel3Obj.params =funs;
    canvasAllLevel3Obj.levle =3;
    var oldPindex=pIndex;

    //canvasAllLevel3Obj.img = '../images/topology/ppc.png';
    if(img != null){
    	canvasAllLevel3Obj.img = img;
    }
    for(var i = 0 ; i < canvasAllLevel2.length ; i++){
        var obj = canvasAllLevel2[i];
        if(obj.index == pIndex && obj.pIndex == ppIndex){
            pIndex = i;
        }
    }
    canvasAllLevel3Obj.pIndex = pIndex;
    //	板卡-处理单元 一排两个 最多四个
    var myCount = Index;
    if(myCount >= 8){
        //一个板卡中最多有四个处理单元
        alert('一个板卡最多8个处理单元');
        return;
    }else{
        canvasAllLevel2[pIndex].count = myCount+1;
        //在我这个板卡中 有四个位置 看看是在哪个区域内
        if(myCount % 2 == 0){
            //另起一排 增加本主机的高度
            //canvasAllLevel1[index].height = canvasAllLevel1[index].height + 120;
            canvasAllLevel3Obj.y = canvasAllLevel2[pIndex].y + 60 + 80*(myCount / 2);
            canvasAllLevel3Obj.x = canvasAllLevel2[pIndex].x + 30;
            if(myCount>3 && myCount/2==2  &&canvasAllLevel2[pIndex].height<310){
            	canvasAllLevel2[pIndex].height+=70;
            	canvasAllLevel1[ppIndex].height+=70;

            }else  if(myCount>5 && myCount/2==3  &&canvasAllLevel2[pIndex].height<390){
            	canvasAllLevel2[pIndex].height+=70;
            	canvasAllLevel1[ppIndex].height+=70;

            }
        }else{
            canvasAllLevel3Obj.y = canvasAllLevel2[pIndex].y + 60 + 80*((myCount -( myCount%2)) / 2);
            canvasAllLevel3Obj.x = canvasAllLevel2[pIndex].x + 30 + 80*(myCount%2);
        }
    }
    //统一同排板卡的高度
    changHeight(myCount,pIndex,oldPindex);

    canvasAllLevel3Obj.x_=canvasAllLevel3Obj.x-canvasAllLevel2[pIndex].x;//板卡x偏移
    canvasAllLevel3Obj.y_=canvasAllLevel3Obj.y-canvasAllLevel2[pIndex].y;//板卡y偏移
    canvasAllLevel3Obj.px_=canvasAllLevel3Obj.x-canvasAllLevel1[ppIndex].x;//主机x偏移
    canvasAllLevel3Obj.py_=canvasAllLevel3Obj.y-canvasAllLevel1[ppIndex].y;//主机y偏移
    canvasAllLevel3.push(canvasAllLevel3Obj);
    //回调函数
    drawCircles();
    var height = canvas.height;
	if(canvasAllLevel1[ppIndex].y +canvasAllLevel1[ppIndex].height+40> height){
		canvas.height = canvasAllLevel1[ppIndex].y + canvasAllLevel1[ppIndex].height+50;
	}
	var width = canvas.width;
	if(canvasAllLevel1[ppIndex].x +canvasAllLevel1[ppIndex].width+40> width){
		canvas.width = canvasAllLevel1[ppIndex].x + canvasAllLevel1[ppIndex].width+50;
	}
}
//统一同排板卡的高度
function changHeight(myCount,index,oldIndex){
 	 //统一同排板卡的高度
 	//获取最大高度
     var maxHeight=canvasAllLevel2[index].height;
     var machineId=canvasAllLevel2[index].board.machineBoxId;
     //获得同排元素
     canvasCurObjs=[];
     for(var k=0;k<canvasAllLevel2.length;k++){
     	if(canvasAllLevel2[k].y==canvasAllLevel2[index].y && canvasAllLevel2[k].board.machineBoxId==machineId){
     		canvasCurObjs.push(canvasAllLevel2[k]);
     		if(maxHeight<canvasAllLevel2[k].height){
         		maxHeight=canvasAllLevel2[k].height;
         	}
     	}
     }
   //重置同排高度
     for(var k3=0;k3<canvasAllLevel2.length;k3++){
     	for(var k4=0;k4<canvasCurObjs.length;k4++){
     		if(canvasCurObjs[k4].board.id==canvasAllLevel2[k3].board.id && canvasCurObjs[k4].board.machineBoxId==machineId){
     			canvasAllLevel2[k3].height=maxHeight;
 			}
     	}
     }
     //修改下面各排的位置
     if(myCount>3 && index==oldIndex){
  	   if(index%4==3 && canvasAllLevel2[index+1]!=null && canvasAllLevel2[index+1].board.machineBoxId==machineId){
  		   for(var c1=index+1;c1<canvasAllLevel2.length;c1++){
  			   if(canvasAllLevel2[c1].board.machineBoxId==machineId){
  				/* if(myCount % 2 == 0){
	     			   canvasAllLevel2[c1].y+=60;
  			   }*/
  				 for(var c2=0;c2<canvasAllLevel3.length;c2++){
	        			   if(canvasAllLevel3[c2].cpu.boardId==canvasAllLevel2[c1].id){
	        				   canvasAllLevel3[c2].y=canvasAllLevel2[c1].y+canvasAllLevel3[c2].y_;
	        			   }
          		   }
      			   /*for(var c3=0;c3<canvasAllLevel1.length;c3++){
      				   if(canvasAllLevel1[c3].machineBox.id==machineId){
      					   canvasAllLevel1[c3].y+=50;
      				   }
      			   }*/
  			   }
  		   }
  	   }
  	   if(index%4==2 && canvasAllLevel2[index+2]!=null && canvasAllLevel2[index+2].board.machineBoxId==machineId){
  		   for(var c1=index+2;c1<canvasAllLevel2.length;c1++){
  			   if(canvasAllLevel2[c1].board.machineBoxId==machineId){
  				/* if(myCount % 2 == 0){
	     			   canvasAllLevel2[c1].y+=60;
  			   }*/
  				 for(var c2=0;c2<canvasAllLevel3.length;c2++){
	        			   if(canvasAllLevel3[c2].cpu.boardId==canvasAllLevel2[c1].id){
	        				   canvasAllLevel3[c2].y=canvasAllLevel2[c1].y+canvasAllLevel3[c2].y_;
	        			   }
          		   }
      			  /* for(var c3=0;c3<canvasAllLevel1.length;c3++){
      				   if(canvasAllLevel1[c3].machineBox.id==machineId){
      					   canvasAllLevel1[c3].y+=50;
      				   }
      			   }*/
  			   }
  		   }
  	   }
  	   if(index%4==1 && canvasAllLevel2[index+3]!=null && canvasAllLevel2[index+3].board.machineBoxId==machineId){
  		   for(var c1=index+3;c1<canvasAllLevel2.length;c1++){
  			   if(canvasAllLevel2[c1].board.machineBoxId==machineId){
  				 /*if(myCount % 2 == 0){
	     			   canvasAllLevel2[c1].y+=60;
  			   }*/
  				 for(var c2=0;c2<canvasAllLevel3.length;c2++){
	        			   if(canvasAllLevel3[c2].cpu.boardId==canvasAllLevel2[c1].id){
	        				   canvasAllLevel3[c2].y=canvasAllLevel2[c1].y+canvasAllLevel3[c2].y_;
	        			   }
          		   }
      			  /* for(var c3=0;c3<canvasAllLevel1.length;c3++){
      				   if(canvasAllLevel1[c3].machineBox.id==machineId){
      					   canvasAllLevel1[c3].y+=50;
      				   }
      			   }*/
  			   }
  		   }
  	   }
  	   if(index%4==0 && canvasAllLevel2[index+4]!=null && canvasAllLevel2[index+4].board.machineBoxId==machineId){
  		   for(var c1=index+4;c1<canvasAllLevel2.length;c1++){
  			   if(canvasAllLevel2[c1].board.machineBoxId==machineId){
  				 /*if(myCount % 2 == 0){
	     			   canvasAllLevel2[c1].y+=60;
  			   }*/
  				 for(var c2=0;c2<canvasAllLevel3.length;c2++){
	        			   if(canvasAllLevel3[c2].cpu.boardId==canvasAllLevel2[c1].id){
	        				   canvasAllLevel3[c2].y=canvasAllLevel2[c1].y+canvasAllLevel3[c2].y_;
	        			   }
          		   }
      			   /*for(var c3=0;c3<canvasAllLevel1.length;c3++){
      				   if(canvasAllLevel1[c3].machineBox.id==machineId){
      					   canvasAllLevel1[c3].y+=50;
      				   }
      			   }*/
  			   }
  		   }
  	   }
     }
     if(myCount>3 && index!=oldIndex){
  	   if(oldIndex%4==3 && canvasAllLevel2[index+1]!=null && canvasAllLevel2[index+1].board.machineBoxId==machineId){
  		   for(var c1=index+1;c1<canvasAllLevel2.length;c1++){
  			   if(canvasAllLevel2[c1].board.machineBoxId==machineId){
  				/* if(myCount % 2 == 0){
	     			   canvasAllLevel2[c1].y+=60;
  			   }*/
  				 for(var c2=0;c2<canvasAllLevel3.length;c2++){
	        			   if(canvasAllLevel3[c2].cpu.boardId==canvasAllLevel2[c1].id){
	        				   canvasAllLevel3[c2].y=canvasAllLevel2[c1].y+canvasAllLevel3[c2].y_;
	        			   }
          		   }
      			 /*  for(var c3=0;c3<canvasAllLevel1.length;c3++){
      				   if(canvasAllLevel1[c3].machineBox.id==machineId){
      					   canvasAllLevel1[c3].y+=50;
      				   }
      			   }*/
  			   }
  		   }
  	   }
  	   if(oldIndex%4==2 && canvasAllLevel2[index+2]!=null && canvasAllLevel2[index+2].board.machineBoxId==machineId){
  		   for(var c1=index+2;c1<canvasAllLevel2.length;c1++){
  			   if(canvasAllLevel2[c1].board.machineBoxId==machineId){
  				/* if(myCount % 2 == 0){
	     			   canvasAllLevel2[c1].y+=60;
  			   }*/
  				 for(var c2=0;c2<canvasAllLevel3.length;c2++){
	        			   if(canvasAllLevel3[c2].cpu.boardId==canvasAllLevel2[c1].id){
	        				   canvasAllLevel3[c2].y=canvasAllLevel2[c1].y+canvasAllLevel3[c2].y_;
	        			   }
          		   }
      			  /* for(var c3=0;c3<canvasAllLevel1.length;c3++){
      				   if(canvasAllLevel1[c3].machineBox.id==machineId){
      					   canvasAllLevel1[c3].y+=50;
      				   }
      			   }*/
  			   }
  		   }
  	   }
  	   if(oldIndex%4==1 && canvasAllLevel2[index+3]!=null && canvasAllLevel2[index+3].board.machineBoxId==machineId){
  		   for(var c1=index+3;c1<canvasAllLevel2.length;c1++){
  			   if(canvasAllLevel2[c1].board.machineBoxId==machineId){
  				/* if(myCount % 2 == 0){
	     			   canvasAllLevel2[c1].y+=60;
  			   }*/
  				 for(var c2=0;c2<canvasAllLevel3.length;c2++){
	        			   if(canvasAllLevel3[c2].cpu.boardId==canvasAllLevel2[c1].id){
	        				   canvasAllLevel3[c2].y=canvasAllLevel2[c1].y+canvasAllLevel3[c2].y_;
	        			   }
          		   }
      			  /* for(var c3=0;c3<canvasAllLevel1.length;c3++){
      				   if(canvasAllLevel1[c3].machineBox.id==machineId){
      					   canvasAllLevel1[c3].y+=50;
      				   }
      			   }*/
  			   }
  		   }
  	   }
  	   if(oldIndex%4==0 && canvasAllLevel2[index+4]!=null && canvasAllLevel2[index+4].board.machineBoxId==machineId){
  		   for(var c1=index+4;c1<canvasAllLevel2.length;c1++){
  			   if(canvasAllLevel2[c1].board.machineBoxId==machineId){
  				 /*if(myCount % 2 == 0){
	     			   canvasAllLevel2[c1].y+=60;
  			   }*/
  				 for(var c2=0;c2<canvasAllLevel3.length;c2++){
	        			   if(canvasAllLevel3[c2].cpu.boardId==canvasAllLevel2[c1].id){
	        				   canvasAllLevel3[c2].y=canvasAllLevel2[c1].y+canvasAllLevel3[c2].y_;
	        			   }
          		   }
      			  /* for(var c3=0;c3<canvasAllLevel1.length;c3++){
      				   if(canvasAllLevel1[c3].machineBox.id==machineId){
      					   canvasAllLevel1[c3].y+=50;
      				   }
      			   }*/
  			   }
  		   }
  	   }
     }
}
/**
 *	新增一个四级元素 放到某三级中
 *	obj1 四级元素的信息
 *	obj2 三级元素
 */
function addCanvasLevel4(obj1 , obj2){
    var canvasAllLevel4Obj = {};
    canvasAllLevel4Obj.x = obj2.x;
    canvasAllLevel4Obj.y = obj2.y;
    canvasAllLevel4Obj.img = obj1.img;
    canvasAllLevel4Obj.id = obj1.id;
    canvasAllLevel4Obj.width = obj1.width;
    canvasAllLevel4Obj.height = obj1.height;
    canvasAllLevel4Obj.pId = obj1.id;
    canvasAllLevel4.push(canvasAllLevel4Obj);
}
/**
 * 拖拽元素
 */
function dragCircle(e) {
    // 判断对象是否开始拖拽
    if (isDragging == true) {
        // 判断拖拽对象是否存在
        if (previousSelectedCircle != null) {
            // 取得鼠标位置
            var x = e.pageX - canvas.offsetLeft-320;
            var y = e.pageY - canvas.offsetTop-70;
            // 将对象移动到鼠标位置
            previousSelectedCircle.x = x - previousSelectedCircle.width/2;
            previousSelectedCircle.y = y - previousSelectedCircle.height/2;
            for(var i = 0 ; i < dragLines1.length ; i++){
                dragLines1[i].obj1.x = previousSelectedCircle.x + previousSelectedCircle.width/2;
                dragLines1[i].obj1.y = previousSelectedCircle.y + previousSelectedCircle.height/2;
            }
            for(var i = 0 ; i < dragLines2.length ; i++){
                dragLines2[i].obj2.x = previousSelectedCircle.x + previousSelectedCircle.width/2;
                dragLines2[i].obj2.y = previousSelectedCircle.y + previousSelectedCircle.height/2;
            }
            // 更新画布
            drawCircles();
        }
    }
}

/**
 *	画线 共通算法 包括拖拽跟随也是这个
 */
function DrawLine(obj1Place , obj2Place, color ,  context){
    context.beginPath();
    context.setLineDash([3,5])
    context.lineWidth = 2;
    if(color !=null){
    	context.fillStyle=color;
    	context.strokeStyle=color;
    }else{
    	context.fillStyle='#bbbbbb';
    	context.strokeStyle='#bbbbbb';
    }
    //设置对象起始点和终点
    context.moveTo(obj1Place.x,obj1Place.y);
    context.lineTo(obj2Place.x,obj2Place.y);
    context.stroke();
}

/**
 *	线高亮
 *	level:第几个级别
 *	index:数据的下角标
 */

function addLineLight(index,curColor){
    var newObj = {};
    newObj.level = 3;
    newObj.index = index;
    lineObjs[index].color='#009EE7';
    if(curColor){
    	lineObjs[index].color=curColor;
    }
}
/**
 *	取消选中的颜色
 */
function cancelLineLight(){
   for(var i = 0 ; i < lineObjs.length ; i++){
    	lineObjs[i].color = '#eeeeee';
    }
}
/**
 *	十字连线的时候的方法
 */
function DrawLine2(obj , context){
    context.beginPath();
    context.setLineDash([5,5])
    context.fillStyle='black';
    //设置对象起始点和终点
    context.moveTo(obj.startx,obj.starty);
    context.lineTo(obj.endx,obj.endy);
    //设置样式
    context.lineWidth = 2;
    context.strokeStyle = "#C5C5C5";
    //绘制
    context.stroke();
}
/**
 *	增加或取消连线的数据
 */
function addLineOrCancel(obj1 , obj2, funs){
    var isLine = true;
    var lineIndex = -1;
   var param;
    if(funs){
    	param = funs;
    }
    var paramAll;
    if(funs.paramAll){
    	paramAll = funs.paramAll;
    }
    for(var i = 0 ; i < lineObjs.length ; i++){
        var lineObj = lineObjs[i];
        if(lineObj.obj1.x == obj1.x && lineObj.obj1.y == obj1.y && lineObj.obj2.x == obj2.x && lineObj.obj2.y == obj2.y ){
            //已经连线过 删除这条线 A连B 和 B连A 都要取消
            lineIndex = i;
            break;
        }else if(lineObj.obj1.x == obj2.x && lineObj.obj1.y == obj2.y && lineObj.obj2.x == obj1.x && lineObj.obj2.y == obj1.y){
            lineIndex = i;
            break;
        }
    }
    if(lineIndex == -1){
        lineObjs.push({obj1:obj1 , obj2:obj2,param:param,paramAll:paramAll});
        if(funs != null && funs.fun1){
            funs.fun1(obj1 , obj2);
        }
    }else{
        if(previousSelectedCircleStartLine != null){
            //已经连线过
            alert("这两个元素已经连线了!")
            return;
        }
        var newLines = new Array();
        for(var i = 0 ; i < lineObjs.length ; i++){
            var lineObj = lineObjs[i];
            if(i != lineIndex){
                // 删除这条线
                var newLine = {obj1:lineObj.obj1 , obj2:lineObj.obj2 ,param:param,paramAll:paramAll};
                newLines.push(newLine);
            }
        }
        lineObjs = newLines;
        if(funs != null && funs.fun2){
            funs.fun2(obj1 , obj2);
        }
    }
}
/**
 *	增加或取消连线的数据
 */
function addLineOrCancel2(obj1 , obj2, funs){
    var isLine = true;
    var lineIndex = -1;
   var param;
    if(funs){
    	param = funs;
    }
    var paramAll;
    if(funs.paramAll){
    	paramAll = funs.paramAll;
    }
    if(lineIndex == -1){
        lineObjs.push({obj1:obj1 , obj2:obj2,param:param,paramAll:paramAll});
        if(funs != null && funs.fun1){
            funs.fun1(obj1 , obj2);
        }
    }else{
        if(previousSelectedCircleStartLine != null){
            //已经连线过
            alert("这两个元素已经连线了!")
            return;
        }
        var newLines = new Array();
        for(var i = 0 ; i < lineObjs.length ; i++){
            var lineObj = lineObjs[i];
            if(i != lineIndex){
                // 删除这条线
                var newLine = {obj1:lineObj.obj1 , obj2:lineObj.obj2 ,param:param,paramAll:paramAll};
                newLines.push(newLine);
            }
        }
        lineObjs = newLines;
        if(funs != null && funs.fun2){
            funs.fun2(obj1 , obj2);
        }
    }
}
/**
 *	两个元素中的中心进行连线
 *	obj1 : 	拖拽的元素
 *	obj2:	被动链接的元素
 */
function doLine(obj1 , obj2 ,funs){
 
    var obj1Place = {};
    var obj2Place = {};
    obj1Place.x = obj1.x + obj1.width / 2;
    obj1Place.y = obj1.y + obj1.height / 2;
    obj1Place.id = obj1.id;
    obj2Place.x = obj2.x + obj2.width / 2;
    obj2Place.y = obj2.y + obj2.height / 2;
    obj2Place.id = obj2.id;
    addLineOrCancel(obj1Place , obj2Place,funs);
}
/**
 *	两个CPU 端口连线
 *	obj1 : 	拖拽的元素
 *	obj2:	被动链接的元素
 *	index1:	1号元素的端口号
 *	index2:	2号元素的端口号
 */
function doLine2(obj1 , obj2 ,index1 , index2 , funs){
    var obj1Place = {};
    var obj2Place = {};
    obj1Place.x = obj1.x + obj1.width / 2 + CPUXYS[index1].X;
    obj1Place.y = obj1.y + obj1.height / 2 + CPUXYS[index1].Y;
    obj1Place.id = obj1.id;
    obj2Place.x = obj2.x + obj2.width / 2 + CPUXYS[index2].X;
    obj2Place.y = obj2.y + obj2.height / 2 + CPUXYS[index2].Y;
    obj2Place.id = obj2.id;
    addLineOrCancel(obj1Place , obj2Place ,funs);
}
/**
 *	画线  重置点击 拖拽事件
 */
function setDrawLine(cursorstyle, fun1 , fun2 , obj) {
    var clicktype = obj.attr('clicktype');
    if(clicktype == "1"){
        //想要连线
        // obj.attr('clicktype','2');
        if (document.getElementById('myCanvas').style) {
            document.getElementById('myCanvas').style.cursor=cursorstyle;
        }
        var funObj = {fun1:fun1,fun2:fun2};
        $(canvas).unbind('mousedown').bind('mousedown', canvasLineClick);
        $(canvas).unbind('mouseup').bind('mouseup' , funObj , outMouseLineDragging);
        $(canvas).unbind('mouseout').bind('mouseout' , funObj , outMouseLineDragging);
        $(canvas).unbind('mousemove').bind('mousemove' , dragLineCircle);
    }else{
        //点完连线后不想连线了
        cancelDrawLine();
    }
}

/**
 *	连上线了之后 重置拖拽事件
 */
function cancelDrawLine(){
    if (document.getElementById('myCanvas').style) {
        document.getElementById('myCanvas').style.cursor='pointer';
    }

    var funObj = {fun1:canvasInitData.fun1,fun2:canvasInitData.fun2};
    $(canvas).unbind('mousedown').bind('mousedown', canvasClick);
    /* $(canvas).unbind('mouseup').bind('mouseup' , funObj , outMouseDragging);
    $(canvas).unbind('mouseout').bind('mouseout' , funObj , outMouseDragging); */
    $(canvas).unbind('mousemove').bind('mousemove' , dragCircle);
}

/**
 *	画线的时候 点击画布 查找有无选中的对象
 *
 */
function canvasLineClick(e) {
    // 取得画布上被单击的点
	var curX=$(".table-box").scrollLeft();
	var curY=$(".table-box").scrollTop();
    var clickX = e.pageX - canvas.offsetLeft-320;
    var clickY = e.pageY - canvas.offsetTop-70;
    // 查找被单击的對象
    var isChooseOneObj = false;
    for(var i = 0 ; i < canvasAllLevel3.length; i++) {
        var circle = canvasAllLevel3[i];
        if(clickX >= circle.x -curX && clickX <= circle.x + circle.width -curX && clickY >= circle.y - curY && clickY <= circle.y + circle.height - curY ){
            //选中了这个元素
            isChooseOneObj = true;
            previousSelectedCircleStartLine = circle;
            initDomPlace(canvasAllLevel3,i);
            break;
        }
    }
    // 判断这个点是否在对象中
    if(isChooseOneObj){

    }else{
        previousSelectedCircleStartLine = null;
        alert("未选中一个对象!");
    }
}
/**
 *	画线的时候 松开鼠标的时候看看有没有元素选中 有的话 连线
 */
function outMouseLineDragging(e){
    // 取得画布上被单击的点
	var curX=$(".table-box").scrollLeft();
	var curY=$(".table-box").scrollTop();
    var clickX = e.pageX - canvas.offsetLeft-320;
    var clickY = e.pageY - canvas.offsetTop-70;
    // 查找被单击的對象
    var isChooseOneObj = false;
    for(var i = 0 ; i < oldCircles.length; i++) {
        var circle = oldCircles[i];
        if(clickX >= circle.x - curX && clickX <= circle.x + circle.width - curX && clickY >= circle.y - curY && clickY <= circle.y + circle.height - curY ){
            //选中了这个元素
            isChooseOneObj = true;
            previousSelectedCircleEndLine = circle;
            break;
        }
    }
    // 判断这个点是否在对象中
    if(isChooseOneObj){
        //放开鼠标的时候 也有元素 让这两个元素 连线
        doLine(previousSelectedCircleStartLine , previousSelectedCircleEndLine , 0 ,e.data);
        previousSelectedCircleStartLine = null;
        drawLineObj = {};
        drawCircles();
        cancelDrawLine();
    }else{
        if(previousSelectedCircleStartLine != null){
            previousSelectedCircleStartLine = null;
            drawLineObj = {};
            drawCircles();
            alert("未选中一个对象!");
        }
    }
}
var drawLineObj = {};
/**
 *	画线
 */
function dragLineCircle(e){
	var curX=$(".table-box").scrollLeft();
	var curY=$(".table-box").scrollTop();
    var clickX = e.pageX - canvas.offsetLeft-320+curX;
    var clickY = e.pageY - canvas.offsetTop-70+curY;
    // 判断拖拽对象是否存在
    if (previousSelectedCircleStartLine != null) {
        // 	取得鼠标位置
        var x = e.pageX - canvas.offsetLeft;
        var y = e.pageY - canvas.offsetTop;
        //	画一条线 起点是选中元素的中心 终点是鼠标的位置
        drawLineObj.startx = previousSelectedCircleStartLine.x + previousSelectedCircleStartLine.width/2;
        drawLineObj.starty = previousSelectedCircleStartLine.y + previousSelectedCircleStartLine.height/2;
        drawLineObj.endx = clickX;
        drawLineObj.endy = clickY;

        // 更新画布
        drawCircles();
    }
}


/**
 *	增加选中的边框的方法
 */
var selectCpuIndex = 0;
function addCanvasAllLevelObj(id,secletLevel){
	selectCpuIndex++;
	if(selectCpuIndex>=3){
		canvasAllLevelObj = [];
		selectCpuIndex = 0;
		drawCircles();
		cancelLineLight();
		lineColor();
		return false;
		//cancelChoose();
	}
	
    var newObj = {};
    var objj={};
    if(secletLevel==1){
    	 for(var i=0;i<canvasAllLevel1.length;i++){
	    	if(canvasAllLevel1[i].machineBox.id==id){
	    	    objj= canvasAllLevel1[i];
	    	    break;
	    	}
	    }
    }
    if(secletLevel==2){
    	 for(var i=0;i<canvasAllLevel2.length;i++){
	    	if(canvasAllLevel2[i].board.boardId==id){
	    	    objj= canvasAllLevel2[i];
	    	    break;
	    	}
	    }
    }
    if(secletLevel==3){
    	for(var i=0;i<canvasAllLevel3.length;i++){
        	if(canvasAllLevel3[i].params.cpu.rioNetId==id){
        	    objj= canvasAllLevel3[i];
        	    break;
        	}
        }
    }
    if(secletLevel==4){
    	for(var i=0;i<canvasAllLevel3.length;i++){
        	if(canvasAllLevel3[i].app){
        		var app= canvasAllLevel3[i].app;
        		if(app.id==id){
        			 objj= canvasAllLevel3[i];
             	    break;
        		}
        	}
        }
    }
	 newObj.x = objj.x-5;
    newObj.y = objj.y-5;
    newObj.width = objj.width+10;
    newObj.height = objj.height+10;
    newObj.level = secletLevel;
    newObj.index = id;
    newObj.color='#029FE8';
    canvasAllLevelObj.push(newObj);
}
/**
 *	取消选中的颜色
 */
function cancelChoose(){
    for(var i = 0 ; i < canvasAllLevelObj.length ; i++){
    	
        var obj = canvasAllLevelObj[i];
        if(obj.color=='#009EE7'){
        	obj.color=="#eeeeee";
        }
    }
    canvasAllLevelObj = [];
}